<template>
    <div class="question-detail">
        <particle-background />
        <div class="container">
            <TopicFilter @search-result="handleSearchResult" />
            <TopicList ref="topicList" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { subjectApi } from '@/request'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import TopicFilter from "@/components/baguwen/TopicFilter.vue"
import TopicList from "@/components/baguwen/TopicList.vue"

const route = useRoute()
const topicList = ref<any>(null)

// 添加搜索结果处理函数
const handleSearchResult = (result:any) => {
    topicList.value?.handleSearchResult(result)
}

// 获取题目详情
const getSubjectDetail = async () => {
    try {
        const labelId = route.params.id
        const data = await subjectApi.bgw.searchSubject({
            labelIdList: [Number(labelId)]
        },1,10);
        handleSearchResult({
            data,
            params: { labelIdList: [Number(labelId)] }
        })
    } catch (error) {
        ElMessage.error('获取题目详情失败')
        console.error('获取题目详情失败：', error)
    }
}

onMounted(() => {
    getSubjectDetail()
})
</script>

<style scoped>
.question-detail {
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 24px auto 0;
    padding: 0 24px;
    position: relative;
    z-index: 1;
    color: #fff;
}

.answer-key-points {
    margin-top: 24px;
}
</style>